<template>



  <div class="app-intro">
    <div class="head">

      <div class="miaoshu">
        <div class="title" style="text-align: center;">
            <p>
              标题：{{posttitle}}
            </p>
        </div>
            <p style="color: #999999">{{postcreateTime}}</p>
      </div>
    </div>
<!--    贴吧-->
    <div class="body" style="height: auto">
      <div class="left">
        <div class="jianjie" style="font-size: 20px; color: black;" >
          <div class="hea">
            <span> 内容：</span>
           
        <el-button type= "primary"  @click="dialogVisible = true" class="hui">
    回复
  </el-button>

  <el-dialog
    v-model="dialogVisible"
    title="回复"
  >

    <el-form-item label="内容" :label-width="50">
          <el-input v-model="postre"/>
        </el-form-item>
        <br>
    <el-button @click="postreSubmit" type="primary" class="ppp">提交</el-button>
  </el-dialog>
          </div>
         
          <div>{{postcontent}}</div>
          <el-divider />
        </div>
        <ul>
          <li v-for="item in PostreList" :key="item.id">

              <p style="font-size: 15px;color: cornflowerblue; margin-top: 0px">
                <el-avatar :size="50" :src="(item.userAvatar)"></el-avatar>
                   用户名：{{item.userName}}
              </p>
            <p style="margin-left: 10px;margin-top: 5px; font-size: 18px">回复:{{item.content}} </p>

              <el-divider />
          </li>
        </ul>
      </div>
<!--  个人信息-->
      <div class="right">
        <div class="tea-box">
          <h2>贴吧主人个人信息</h2>
          <div class="tea-infor">
            <p>
              <el-avatar :size="50" :src="useravatar"></el-avatar>
            </p>
            
            <p  style="margin-top: 11px">用户名：{{ username }}</p>
            <p class="line">邮箱：{{useremail}}</p>
            <p>身份：{{ userrole }}</p>
            <p>性别：{{ usersex }}</p>
            <p>个人描述：{{ userdescribe }}</p>
            <div class="teaname">
              <span>{{tename}}</span>
            </div>
          </div>

        </div>
      </div>
    </div>

  </div>
</template>
<script setup>
import {onMounted, ref,reactive} from 'vue'
import {useRoute} from 'vue-router'
import userApi from "@/apis/post";

const route = useRoute()


const dialogVisible = ref(false)
const  userid=ref('')
const  username=ref('')
const  useremail=ref('')
const  useravatar=ref('')
const  userrole=ref('')
const  usersex=ref('')
const  userdescribe=ref('这人很懒，什么都没写')
const  userstatus=ref('')

const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'

let PostreList=reactive([])
//帖子表
const postid=ref('')
const posttitle=ref('')
const postcontent=ref('')
const postcreateTime=ref('')
const postuserId=ref('')
const postlikes=ref('')
const postreplies=ref('')
const poststatus=ref('')
const uid=ref([])
//回帖表
// const  reid=ref('')
// const  postre_userid=ref('')
// const  postrecontent=ref('')
// const  postrestatus=ref('')
const postre = ref()


onMounted(()=>{
  getpostList().then(res=>{userseacher()}),
  getrePost()
  
})



const getpostList = async()=>{
  const res = await userApi.postSearch(route.params.id)
  console.log("res",res)
  posttitle.value=res.data.title
  postcontent.value=res.data.content
  postcreateTime.value=res.data.createTime
  postlikes.value=res.data.likes
  postreplies.value=res.data.replies
  postuserId.value=res.data.userId

  console.log("postuserId",postuserId.value)


}

const userseacher = async()=>{
  const res = await userApi.postuserSearch(postuserId.value)
  username.value=res.data.data.name;
  useremail.value=res.data.data.email;
  userrole.value=res.data.data.role;
  useravatar.value=res.data.data.avatar
  usersex.value = res.data.data.sex
  userdescribe.value = res.data.data.describe







}
//获取帖子表
// function getpostList(){
//   id=route.params.id
//   console.log("传过来的id：",id)
//   userApi.postSearch(id).then((response)=>{
//     let list=response.data;
//     postid.value=list.id
//     posttitle.value=list.title
//     postcontent.value=list.content
//     postcreateTime.value=list.createTime
//     postuserId.value=list.userId
//     postlikes.value=list.likes
//     postreplies.value=list.replies
//     poststatus.value=list.status
//     userApi.postreSearch(id).then((res)=>{
//       PostreList=res.data.data;
//       // for (let i = 0; i < PostreList.length; i++) {
//       //   uid.value.push(PostreList[i].id);
//       //   console.log(" uid[i].value", uid[i].value)
//       // }
//       console.log("PostreList", PostreList)
//       userseacher();
//     })

  
//   })

// }
// function reuserSeacher(){
//   // console.log("PostreList.id",PostreList)
//   userApi.postuserSearch(PostreList.userId).then(response => {
//     console.log("response =", response);
//     let list2= response.data.data.data;
//     userid.value=list2.id;
//     username.value=list2.name;
//     useremail.value=list2.email;
//     useravatar.value=list2.avatar;
//     userrole.value=list2.role;
//     usersex.value=list2.sex;
//     userdescribe.value=list2.describe;
//     userstatus.value=list2.status;
//   })
// }

// function userseacher() {
//     userApi.postuserSearch(postuserId.value).then(response => {
//       // console.log("response =", response);
//       let list1= response.data.data.data;
//       userid.value=list1.id;
//       username.value=list1.name;
//       useremail.value=list1.email;
//       useravatar.value=list1.avatar;
//       userrole.value=list1.role;
//       usersex.value=list1.sex;
//       userdescribe.value=list1.describe;
//       userstatus.value=list1.status;
//     })
// }
const getrePost = async()=> {
  const res = await userApi.postreSearch(route.params.id)
  console.log("res",res)
  PostreList = res.data
  console.log("postrelist:",PostreList)


}

const postreSubmit = async()=>{
  await userApi.postReply(route.params.id,postre.value)
  location.reload()
}

</script>
<style scoped>
.app-intro{

  width: 1100px;
  margin: 0 auto;
  margin-bottom: 30px;;
}
.head{
  margin-top: 30px;
  width: 1100px;
  display: flex;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
  margin-bottom: 20px;
}
img{
  width: 400px;
  height: 180px;
}
.miaoshu{
  margin-left: 20px;
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

}
.miaoshu .title{
  font-size: 30px;

}
.miaoshu .jianjie{
  font-size: 18px;
}
.title{
  display: flex;
  justify-content: space-between;
}
.count{
  margin-right: 20px;
  text-align: center;
}
.icon-zan{
  font-size: 26px;
}
.body{
  display: flex;
}
.left{
  flex:1;
  background-color: #fff;
  margin-right: 20px;
  border-radius: 5px;
  border:1px solid #d6c8c8;
  padding: 20px;
}
.right{
  width: 300px;
  height: 380px;
  background-color: #fff;
  border-radius: 5px;
  border:1px solid #d6c8c8;
}
.tea-box h2{
  padding: 10px 15px;
  font-weight: normal;
}
.tea-infor{
  padding: 20px;
  /*display: flex;*/
  height: 100%;
}
.teaname{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 16px;
}
.tea-box p{
  margin-left: 20px;
  margin-top: 10px;
}
/* .left img{
    width: 600px;
    height: 400px;
} */
ul{
  list-style: none;
}
ul li{
  font-size: 18px;
  margin-left: 10px;
}

.addbut{
  margin-bottom: 10px;
}
.line{
  display: block;
  margin-bottom: 10px; /* 调整行间距 */
}
.hea{
  display: flex;
  justify-content: space-between;
}
.el-dialog{
  position: relative;
 
}
.ppp{
  position: absolute;
  right: 30px;
  bottom: 10px;

}

</style>
